<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>作品管理</title>
		<link rel="stylesheet" href="../css/common.css">
		<link rel="stylesheet" href="../css/page.css">
		<script src="../js/jquery-3.2.1.min.js"></script>
		<script src="../js/media.js"></script>
		<script src="../js/common.js"></script>
		<style>
			/*---------------------------弹出框样式----------------*/			
			.promptBomb {
				/*display: none;*/
				width: 100%;
				height: 100%;
				position: fixed;
				top: 0;
				left: 0;
				background: rgba(0, 0, 0, 0.2)
			}			
			.promptBomb .promptBomb-box {
				width: 2.8rem;
				height: 1.6rem;
				background: #fff;
				padding-left: 0.24rem;
				padding-right: 0.16rem;
				margin: 2.2rem auto;
			}			
			.promptBomb .promptBomb-box .promptBomb-title {
				font-size: 0.16rem;
				line-height: 0.16rem;
				padding-top: 0.24rem;
				color: #333;
			}			
			.promptBomb .promptBomb-box .promptBomb-content {
				font-size: 0.14rem;
				color: #666;
				width: 2.4rem;
				height: 0.44rem;
				overflow: hidden;
				line-height: 0.21rem;
				margin-top: 0.20rem;
			}			
			.promptBomb .promptBomb-box .promptBomb-btn {
				width: 0.88rem;
				height: 0.36rem;
				background: none;
				color: #37993e;
				font-size: 0.14rem;
				text-align: center;
				line-height: 0.36rem;
				float: left;
				border: 0px;
			}			
			.promptBomb .promptBomb-box .promptBomb-btn1 {
				width: 0.88rem;
				height: 0.36rem;
				background: none;
				color: #37993e;
				font-size: 0.14rem;
				text-align: center;
				line-height: 0.36rem;
				float: right;
				border: 0px;
			}			
			.bd-0 {
				display: none;
			}			
			.active {
				display: block;
			}			
			.btn-delete {
				float: right;
				display: block;
				border: 0.01rem solid #999;
				width: 0.48rem;
				height: 0.23rem;
				line-height: 0.24rem;
				text-align: center;
				border-radius: 0.04rem;
				margin-left: 0.12rem;
			}			
			.btn-editor {
				float: right;
				display: block;
				border: 0.01rem solid #5e3004;
				width: 0.48rem;
				height: 0.23rem;
				line-height: 0.24rem;
				text-align: center;
				border-radius: 0.04rem;
				color: #5e3004;
			}
		</style>
	</head>
	<body>
		<!--头部-->
		<div class="public-header flex">
			<span class="public-header-left-back"></span>
			<span class="public-header-center">作品管理</span>
			<span class="public-header-right" onclick='javascript:window.location.href="../page/my_Publish_goods.html"'>上传作品</span>
		</div>
		<!--正文-->
		<div class="Lot-management bc-gray">
			<div class="hd flex">
				<a href="javascript:;" :class="{active:active[0]}" @click='click_pop("0",0)'>草稿箱</a>
				<a href="javascript:;" :class="{active:active[1]}" @click='click_pop(1,1)'>审核中</a>
				<a href="javascript:;" :class="{active:active[2]}" @click='click_pop(2,2)'>展示中</a>
				<a href="javascript:;" :class="{active:active[3]}" @click='click_pop(3,3)'>已失败</a>
			</div>
			<div class="bd">
				<div v-if="datas.length == 0">
					<div style="text-align: center;margin-top: 100px;">暂无相关作品</div>
				</div>
				<div v-else>
					<div class="bd-1 bd-0 active">
						<ul class="clearfix">
							<div v-if="isWhat == 1">
								<li class="clearfix" v-for='item in datas' @click="nextPp(item.produce_id)">
									<img :src="item.production_slideshow['0'].production_img_url" alt="">
									<div style="width: 2.6rem;overflow: hidden;line-height: 0.243rem;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;">
										{{item.production_presentation}}
									</div>
									
								</li>
							</div>
							<div v-if="isWhat == 2">
								<li class="clearfix" v-for='item in datas' >
									<img :src="item.production_slideshow['0'].production_img_url" alt="">
									<div style="width: 2.6rem;overflow: hidden;line-height: 0.243rem;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;">
										{{item.production_presentation}}
									</div>
									
								</li>
							</div>
							<div v-if="isWhat == 3">
								<li class="clearfix" v-for='item in datas'>
									<img :src="item.production_slideshow['0'].production_img_url" alt="">
									<div style="width: 2.6rem;overflow: hidden;line-height: 0.243rem;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;">
										{{item.production_presentation}}
									</div>
									
								</li>
							</div>
							<div v-if="isWhat == 0 ">
								<li class="clearfix" v-for='item in datas'>
									<img :src="item.production_slideshow['0'].production_img_url" alt="">
									<div class="clearfix" style="height:0.243rem;width: 2.6rem;overflow: hidden;line-height: 0.243rem;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;">
										{{item.production_presentation}}
									</div>
									<p class="btn-bto" style="float:right;width: 2.6rem;height:0.24rem;margin-top:0.3rem">
										<span class="btn-delete" @click="deleteP(item.production_id)">删除</span>
										<span class="btn-editor" @click="nextUrls(item.production_id)">编辑</span>
									</p>
									
								</li>
							</div>

						</ul>
					</div>
				</div>
			</div>
			<script src="../js/vue.js"></script>
			<script src="../js/vue-resource.min.js"></script>
			<script>
				$(function() {
					new Vue({
						el: 'body',
						data: {
							datas: '',
							active: [1, 0, 0, 0],
							list: [{
								a1: '0',
								a2: '草稿箱'
							}, {
								a1: '1',
								a2: '审核中'
							}, {
								a1: '2',
								a2: '展示中'
							}, {
								a1: '3',
								a2: '已失败'
							}],
							isshow: false,
							uid: '',
							sid: '',
							isWhat: '0'
						},
						ready: function() {
							var _self = this;
							_self.uid = sessionStorage.getItem("uid");
							_self.sid = sessionStorage.getItem("s_id");
							$.ajax({
								type: 'POST',
								url: base_url + 'ZITAOHUI/getProductionList',
								data:JSON.stringify({
									production_status: "0",
									store_id: _self.sid
								}),
								contentType: "application/json;charset=UTF-8;",
								success: function(response) {
									var all_data = response.extend.list;
									console.log(all_data);
									_self.datas = all_data;
								}
							})
						},
						methods: {
							click_pop: function(id, index) {
								var _self = this;
								//console.log(index);
								_self.isWhat = index;
								if(index == 0) {
									_self.active = [1, 0, 0, 0]
								} else if(index == 1) {
									_self.active = [0, 1, 0, 0]
								} else if(index == 2) {
									_self.active = [0, 0, 1, 0]
								} else if(index == 3) {
									_self.active = [0, 0, 0, 1]
								} 
								$.ajax({
									type: 'POST',
									url: base_url + 'ZITAOHUI/getProductionList',
									data:JSON.stringify({
										production_status: id,
										store_id: _self.sid
									}),
									contentType: "application/json;charset=UTF-8;",
									success: function(response) {
										var all_data = response.extend.list;
										console.log(all_data);
										_self.datas = all_data;
									}
								})
							},
							nextUrls: function(pid) {//跳转到编辑的页面
								window.location.href = "../page/my_Publish_goods.html?" + "production_id=" + pid;
							},
							nextPp: function(id) {//跳转到商品详情的url
								console.log('跳转到详情页面')
								//window.location.href = "../page/buy-info-page.3.html?p_id=" + id + '&s_id=' + this.sid + "&time=" + new Date().getTime();
							},
							deleteP: function(production_id) {//删除该商品
								promptBombAlert('确定删除该商品？', production_id, function(production_id) {
									$.ajax({ //删除商品
										type: "post",
										url: base_url + "ZITAOHUI/delProduction",
										data:JSON.stringify({
											production_id: production_id
										}),
//										dataType: "json",
										contentType: "application/json;charset=UTF-8;",
										success: function(data) {
											//console.log(data)
											if(data.code == 1) {
												alert("删除成功");
												location.reload();
											}
										},
										error: function(error) {
										}
									})
								})                     	
							}
						}
					})
				})
				var promptBombAlert = function(cont, id, fun) {
					var str = '<div class="promptBomb"><div class="promptBomb-box"><p class="promptBomb-title">提示</p><p class="promptBomb-content">' + cont + '</p><button class="promptBomb-btn">确定</button><button class="promptBomb-btn1">取消</button></div></div>'
					$('body').append(str);
					$('.promptBomb-btn1').click(function() {
						$('.promptBomb').remove();
					})
					$('.promptBomb-btn').click(function() {
						$('.promptBomb').remove();
						fun(id);
					})
				}
			</script>
	</body>
</html>